<template>
    <div class="message">
        <component :is="render()"></component>
    </div>
</template>

<script setup lang="ts">
import type { interGroupMessage, interGroupMessageInfo, interMessageType } from '@b/model/base/type';
import { reactive, h, type VNode } from 'vue';

interface prop {
    messages: { [key in interMessageType]?: interGroupMessage },
    item: interGroupMessageInfo
}

const { messages, item } = defineProps<prop>()
const cache: { [key: string]: VNode } = reactive({})

const render = () => {
    const it = cache[item.id]
    if (it) return it
    const p = messages[item.type]?.p_formatter(item.fullUrl || item.msg) as VNode | Promise<VNode>
    if (p instanceof Promise) {
        p.then(res => {
            cache[item.id] = res
        })
        return h('div')
    } else {
        return p
    }
}
</script>